import './App.css';
import {
    LOGIN_STATE_DIALOG,
    LOGIN_STATE_EXIT_LOGIN,
    LOGIN_STATE_LOGING,
    LOGIN_STATE_UN_KNOW,
    NAVI_BLOG_TITLE,
    NAVI_GIT_TITLE,
    NAVI_MAIN_TITLE,
    NAVI_WORLD_TITLE
} from "./constant/Constant"
import {logE} from "./utils/LogUtils";
import {AppContent, AppTopBar} from "./compose/AppUI";
import {useState} from "react";
import {LoginBlock} from "./compose/LoginUI";
import {NAVI_BLOG, NAVI_GIT, NAVI_MAIN, NAVI_WORLD} from "./constant/MainNavi";
import {login} from "./http/LoginService";
import {createStore} from 'redux'

//导航栏
const naviItems = [{"navi": NAVI_MAIN, "title": NAVI_MAIN_TITLE}, {
    "navi": NAVI_BLOG,
    "title": NAVI_BLOG_TITLE
}, {"navi": NAVI_WORLD, "title": NAVI_WORLD_TITLE}, {"navi": NAVI_GIT, "title": NAVI_GIT_TITLE},]
const topBarTitle = "一树"


function App() {
    const [loginState, setLoginState] = useState(LOGIN_STATE_UN_KNOW)

    return (<div className={"App"}>
        {/*顶部导航栏*/}
        <AppTopBar title={topBarTitle}
                   items={naviItems}
                   loginState={loginState}
                   onLoginStateClick={(state) => {
                       if (state === LOGIN_STATE_UN_KNOW) {
                           //未登录状态，弹出登录框
                           setLoginState(LOGIN_STATE_DIALOG)
                           return
                       }
                       if (state === LOGIN_STATE_EXIT_LOGIN) {
                           setLoginState(LOGIN_STATE_UN_KNOW)
                       }
                   }}
                   onRepeatClickNavi={(navi) => {
                       logE(navi)
                   }}

        />

        {/*登录块*/}
        {loginState === LOGIN_STATE_DIALOG ? <LoginBlock onCallLogin={(username, password) => {
            setLoginState(LOGIN_STATE_LOGING)
            login(username, password)
        }} onCallDismiss={() => {
            setLoginState(LOGIN_STATE_UN_KNOW)
        }}/> : ""}

        {/*内容块*/}
        <AppContent/>
    </div>)
}


export default App;
